<template>
  <el-dialog :title="title" :visible.sync="dialogUserVisible" width="30vw" :close-on-click-modal="false" @close="close"
    :append-to-body="true" ref="dialog">
    <el-form ref="form" :model="form" :rules="rules" label-width="0.8rem">
      <el-form-item label="用户名" prop="loginname">
        <el-input v-model.trim="form.loginname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model.trim="form.xingming" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model.trim="form.mima" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属角色">
        <el-select v-model="form.jueseList" multiple placeholder="请选择">
          <el-option v-for="(item, index) in Jslist" :key="index" :label="item.mingcheng" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model.trim="form.miaoshu" type="textarea" :rows="5" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <!-- <div class="list-button-group" id="buttongroup">
      <div class="button-item">
        <el-button type="primary" icon="el-icon-plus" @click="insertEvent()">
          新增
        </el-button>
      </div>
    </div>
    <ux-grid border show-overflow ref="UserTable" keep-source :height="tabheight" :highlightCurrentRow="false" widthResize
      :rules="ruleslist" @selection-change="selectChange" :edit-config="{ trigger: 'click', mode: 'row' }"
      :validConfig="{ autoPos: true }">
      <ux-table-column type="checkbox" width="50" />
      <ux-table-column type="index" title="序号" width="80"></ux-table-column>
      <ux-table-column field="loginname" title="用户名" :edit-render="{ autofocus: '.el-input__inner' }">
        <template v-slot:edit="scope">
          <el-input v-model.trim="scope.row.loginname" placeholder="请输入用户名" />
        </template>
      </ux-table-column>
      <ux-table-column field="xingming" title="姓名" :edit-render="{ autofocus: '.el-input__inner' }">
        <template v-slot:edit="scope">
          <el-input v-model.trim="scope.row.xingming" placeholder="请输入姓名" />
        </template>
      </ux-table-column>
      <ux-table-column field="jueseList" title="所属角色" width="400" :edit-render="{ autofocus: '.el-input__inner' }">
        <template v-slot:edit="scope">
          <el-select v-model="scope.row.jueseList" multiple placeholder="请选择">
            <el-option v-for="(item, index) in Jslist" :key="index" :label="item.mingcheng" :value="item.id"></el-option>
          </el-select>
        </template>
      </ux-table-column>
      <ux-table-column field="miaoshu" title="描述" width="300" :edit-render="{ autofocus: '.el-input__inner' }">
        <template v-slot:edit="scope">
          <el-input v-model.trim="scope.row.miaoshu" placeholder="请输入描述" />
        </template>
      </ux-table-column>
      <ux-table-column title="操作" width="60">
        <template v-slot="{ row }">
          <el-button @click="remove(row)" type="text">删除</el-button>
        </template>
      </ux-table-column>
    </ux-grid> -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { juesequery, yonghusave, getyonghuJS } from '@/api/institution'

export default {
  name: 'UserManagementEdit',
  data() {
    return {
      form: {},
      ruleslist: {
        xingming: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        jueseList: [
          { required: true, message: '请选择角色', trigger: 'blur' },
        ],
      },
      rules: {
        xingming: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        jueseList: [
          { required: true, message: '请选择角色', trigger: 'blur' },
        ],
      },
      title: '',
      dialogUserVisible: false,
      jglblist: [],
      shangjilist: [],
      tabheight: 300,
      userlist: [],
      Jslist: []
    }
  },
  props: {
    yonghuData: {
      type: Array,
      default: () => {
        return []
      },
    },
    rowjigouid: {
      type: String,
      default: ''
    }
  },
  methods: {
    async showEdit(row) {
      if (!row) {
        this.title = '新增用户'
      } else {
        this.title = '编辑用户'
        const data = await getyonghuJS(row.id)
        const jueseList = data.data.map(item => item.jueseid)
        console.log(row);
        let rows = {
          "id": row.id,
          "xingming": row.xingming,
          "loginname": row.loginname,
          "jigouid": row.jigouid,
          "mima": row.mima,
          "miaoshu": row.miaoshu,
          "jueseList": jueseList
        }
        this.form = Object.assign({}, rows)
      }
      this.dialogUserVisible = true
      const data = await juesequery({ "jigouid": this.rowjigouid })
      this.Jslist = data.data
      // this.$nextTick(() => {
      //   this.$refs.UserTable.reloadData(this.yonghuData)
      // })
    },
    close() {
      this.dialogUserVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.form.jigouid = this.rowjigouid
          let jueseIds = this.form ? this.form.jueseList.toString() + ',' : ''
          const { msg } = await yonghusave(jueseIds, this.form)
          this.$baseMessage(msg, 'success')
          this.$emit('changeYonghu')
          this.close()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      // this.$refs.UserTable.validate(true).then(async data => {
      //   if (data) {
      //     return data
      //   } else {
      //     let data1 = this.$refs.UserTable.getUpdateRecords()
      //     let data = this.$refs.UserTable.getRecordset()
      //     let formdata = [...data, ...data1]
      //     let jueseIds = formdata ? formdata[0].jueseList.toString() : "asd123"
      //     let datas = {
      //       "id": formdata[0].id,
      //       "xingming": formdata[0].xingming,
      //       "loginname": formdata[0].loginname,
      //       "jigouid": formdata[0].jigouid,
      //       "mima": formdata[0].mima,
      //     }
      //     const { msg } = await yonghusave(jueseIds, datas)
      //     this.$baseMessage(msg, 'success')
      //     this.$emit('changeYonghu')
      //     this.close()
      //   }
      // })
    },
    async insertEvent(row) {
      let record = { jigouid: this.rowjigouid }
      // 加入行, 表示加入行的row对象，row为空则插入第一行，为-1插入最后一行
      let { row: newRow } = await this.$refs.UserTable.insertRow(record)
      // 激活单元格编辑
      await this.$refs.UserTable.setActiveRow(newRow)
    },
    selectChange(e) { },
    delwzDetail() {
      this.$refs.UserTable.remove(this.$refs.UserTable.getCheckboxRecords())
    },
    remove(row) {
      this.$refs.UserTable.remove(row)
    },
  },
}
</script>
<style lang="scss" scoped>
.el-select--small {
  width: 100%;
}

.list-button-group {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;

  .button-item {
    padding: 0px 10px;
  }

  .button-item:first-child,
  &:last-child {
    padding: 0px 10px 0 0;
  }
}

::v-deep {
  .el-dialog__body {
    padding: 20px !important;
  }

  .elx-table--header-wrapper {
    background-color: rgb(233, 243, 255) !important;
  }

  .elx-header--column {
    background-image: none !important;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input--inner {
    width: 100% !important;
  }

  .el-form-item--small.el-form-item {
    margin-bottom: 0px;
    margin-top: 18px;
  }
}
</style>